<!DOCTYPE html>
<html>
	<head>
		<!-- 后端开发工程，简单的会写，复杂的会看就行了 -->
		<meta charset="utf-8">
		<title>表单数据前后端交互操作</title>



	</head>
	<body>
		<!--  -->
		<div id="app" align="center">

			<h2>用户新增</h2>
			<div>
				用户名：<input type="text" v-model="addUser.name" />
				年纪：<input type="text" v-model="addUser.age" />
				性别：<input type="text" v-model="addUser.sex" />
				<!-- 方法中是否需要携带参数。看是否有其他的数据来源 有就不用参数 -->
				<button type="button" @click="addUserBtn">新增</button>
			</div>
			<hr>
			<h2>用户修改</h2>
			<div>
				<!-- 使用属性disabled 是禁用属性 -->
				id编号：<input type="text" v-model="updatUser.id" disabled />
				用户名：<input type="text" v-model="updatUser.name" />
				年纪：<input type="text" v-model="updatUser.age" />
				性别：<input type="text" v-model="updatUser.sex" />
				<!-- 方法中是否需要携带参数。看是否有其他的数据来源 有就不用参数 -->
				<button type="button" @click="updateBtn">确定</button>
			</div>


			<!-- 需要准备一个表格，展现user的数据 -->

			<table id="tab1" border="1px" width="60%" align="center" cellpadding="">
				<tr>
					<td colspan="5">
						<h1 align="center">用户列表</h1>
					</td>
				</tr>
				<tr align="center" height="50px">
					<th>编号</th>
					<th>名称</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
				<!-- 4. -->
				<tr align="center" v-for="user in userList">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td>
						<button @click="toUpdate(user)">修改</button>
						<button @click="deleteUserById(user.id)">删除</button>
					</td>


				</tr>

			</table>
		</div>

		<script src="./js/vue.js"></script>
		<script src="./js/axios.js"></script>
		<script>
		//简化路劲的操作方式
			axios.defaults.baseURL = "http://localhost:8090"
			const app = new Vue({
				el: '#app',
				data: {
					userList: [],
					// 定义新增用户
					addUser: {
						name: '',
						age: '',
						sex: ''
					},
					//定义更新数据的对象
					updatUser: {
						id: '',
						name: '',
						age: '',
						sex: ''
					}
				},
				// 普通方法
				methods: {
					//1.定义获取远程数据的ajax请求 获取数据
					async getUserList() {
						//alert("diany")
						let {
							data: result
						} = await axios.get("/users/findAll")

						this.userList = result
						//console.log(result.data)



					},
					async deleteUserById(id) {
						console.log(id)
						if (confirm("是否确认删除！")) {
							//数据多的话使用字符串的拼接  模板字符串的写法  使用 ` ` 反引号
							//axios.delete(` http://localhost:8090/users/user/${id}`)
							let {
								data: result
							} = await axios.delete("/users/user/" + id)
							console.log(result)
							this.getUserList()

						}

					},
					//新增用户//需要异步刷新的时候使用async 和 await
					async addUserBtn() {
						let {
							data: result
						} = await axios.post("/users/saveUser", this.addUser)

						this.getUserList()
						//新增成功后。清空新增输入框数据
						this.addUser = {}
					},
					//将点击的数据发送给修改框
					toUpdate(user) {
						//点击修改按钮时，将数据床底给updateUser对象

						this.updatUser = user
					},
					//修改用户数据数据
					async updateBtn() {
						let {
							data: result
						} = await axios.put("/users/updateUser", this.updatUser)
						console.log(result)
						//跟新后将页面刷新
						this.getUserList()
						//修改完了。清空输入框的数据
						this.updatUser = {}
					}



				},
				//2.使用生命周期函数来触发axios的函数调用
				created() {
					this.getUserList()
					//alert("diaoyonghu")
				},




				//计算方法
				computed: {

				}

			})
		</script>

	</body>
</html>
